<template>
	<view :style="{ '--bgcolor': pageData.bgColor, '--color': color, '--inactive-color': pageData.inactiveColor || '#606266',
		'--group-size': pageData.groupSize ? pageData.groupSize+'rpx':'30rpx', '--group-weight': pageData.groupWeight || 'normal'}">
		<!-- 样式五 -->
		<view class="list5" v-if="pageData.style == 5">
			<view class="d-flex">
				<view class="flex-1 text-center" @click="current = index" v-for="(item,index) in list" :key="index">
					<view class="tab m-bot10" :class="{'thmeColor': index == current}">{{ item.classify_name }}</view>
					<view class="h6 color_99" :class="{'active': index == current}">{{ item.classify_info }}</view>
				</view>
			</view>
			<view class="padding20 d-flex f-wrap j-sb" v-if="list.length">
				<view class="item bgwhite bor_radius_20 m-bot20" :class="{ shadow: pageData.shadow == 1 }" v-for="(item, index) in list[current].goods" :key="index" @click="toGoods(item.goods_id)">
					<view class="text-center">
						<image :src="$imgUrls(item.img)" mode="aspectFill" class="img bor_radius_20"></image>
					</view>
					<view class="padding20">
						<view class="size30 ellipsis m-bot10" :style="{'font-weight': pageData.goodsWeight||300}">{{ item.name }}</view>
						<view class="h6 color_66 ellipsis m-bot10">{{ item.info }}</view>
						<view class="d-flex a-center"> 
							<view class="flex-1">
								<view class="size36 bold" :style="{ color: pageData.priceColor || '#E90B08' }">￥{{ parseFloat(item.price) }}</view>
								<view class="h7 color_66">已售{{ item.sales_number }}</view>
							</view>
							<view class="btn m-right10" :style="{background: '#50d643'}" v-if="item.recommendList" @click.stop="openPop(item, 1)">{{ item.recommendList[0].btn_title || '试样' }}</view>
							<view class="btn" :style="{background: pageData.btnColor || '#E90B08'}" @click.stop="openPop(item, 2)">去购买</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 专场 -->
		<view class="special" v-else-if="pageData.style == 4">
			<view class="content" v-for="(item, index) in list" :key="index">
				<view class="d-flex a-center m-bot30">
					<view class="flex-1 tab">{{ item.classify_name }}</view>
					<view class="color_99" @click="toCates(item)">
						<text>进入专场</text>
						<text class="iconfont icon-xiangyouxiayiye h6"></text>
					</view>
				</view>
				<image class="bor_radius_10 m-bot20" :src="$imgUrls(pageData.img)" mode="widthFix" @click="toCates(item)" v-if="list.length == 1 && pageData.img"></image>
				<image class="bor_radius_10 m-bot20" :src="$imgUrls(item.classify_atlas)" mode="widthFix" @click="toCates(item)" v-else-if="item.classify_atlas"></image>
				<view class="scroll-x d-flex p-left6 p-right6" v-if="item.goods && item.goods.length">
					<block v-for="(subItem, subIndex) in item.goods" :key="subIndex">
						<view class="item text-center m-right30 p-re" @click="toGoods(subItem.goods_id)" v-if="subIndex < pageData.count">
							<image :src="$imgUrls(subItem.img)" mode="aspectFill" class="img m-bot10"></image>
							<view class="mask2 padding20" v-if="!subItem.stock">
								<image src="https://sra.mogoie.com/Uploads/diy/img/sold.png"></image>
							</view>
							<view class="ellipsis m-bot6" :style="{'font-weight': pageData.goodsWeight||'normal'}">{{ subItem.name }}</view>
							<view :style="{ color: pageData.priceColor || '#E90B08' }">
								<text>￥</text>
								<text class="size28">{{ parseFloat(subItem.price) }}</text>
							</view>
						</view>
					</block>
					<view class="more bor_radius_4 flexac f-column f-shrink-0 color_99" @click="toCates(item)" v-if="item.goods.length > pageData.count">
						<text class="txt">查看更多</text>
						<u-icon name="arrow-right-double" size="12"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 样式三 -->
		<view v-else-if="pageData.style == 3" :style="{ backgroundColor: pageData.bgColor }">
			<view class="p-bot30 p-left8 p-right8">
				<u-tabs
					:list="list"
					:activeStyle="{ color }"
					lineWidth="20"
					:lineColor="color"
					keyName="classify_name"
					@click="click"
					:inactiveStyle="{ color: pageData.inactiveColor }"
				></u-tabs>
			</view>
			<view class="slide d-flex p-left30" v-if="list.length">
				<view class="item m-right30 p-re" v-for="(item, index) in list[current].goods" :key="index" @click="toGoods(item.goods_id)">
					<text class="iconfont size28 p-ab" :class="item.goods_collect ? 'icon-guanzhu3' : 'icon-guanzhu1'" @click.stop="handleCollect(item)"></text>
					<image :src="$imgUrls(item.img)" mode="aspectFill" :class="['img', { shadow: pageData.shadow == 1 }]"></image>
					<view class="mask2" v-if="!item.stock"></view>
					<image src="https://sra.mogoie.com/Uploads/diy/img/sold.png" class="sold" v-if="!item.stock"></image>
					<view class="d-flex j-sb a-center p-top20 m-bot20">
						<view class="size30 black ellipsis" :style="{'font-weight': pageData.goodsWeight||300}">{{ item.name }}</view>
						<view
							class="iconfont size40 bold500"
							:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{ color: pageData.btnColor || '#E90B08' }"
						></view>
					</view>
					<view class="p-bot20">
						<text class="size28" :style="{ color: pageData.priceColor || '#E90B08' }">￥{{ parseFloat(item.price) }}</text>
						<text class="h6 color_77 bold300" v-if="item.unit">/{{ item.unit }}</text>
					</view>
				</view>
			</view>
		</view>

		<view :class="{ 'd-flex': pageData.style == 2 }" v-else>
			<!-- 顶部菜单 -->
			<view class="rows p-top20 p-bot10" :style="{ backgroundColor: pageData.bgColor }" v-if="pageData.style == 1">
				<u-tabs
					:list="list"
					:activeStyle="{ color }"
					:inactiveStyle="{ color: pageData.inactiveColor }"
					lineWidth="20"
					:lineColor="color"
					:scrollable="false"
					keyName="classify_name"
					@click="click"
				></u-tabs>
			</view>
			<!-- 左侧菜单 -->
			<view class="side" :style="{ backgroundColor: pageData.bgColor }" v-if="pageData.style == 2">
				<view v-for="(item, index) in list" :key="index" @click="handleClick(index)">
					<view :class="['tab ellipsis', { on: index == current }]">
						{{ item.classify_name }}
					</view>
				</view>
			</view>

			<view class="content" v-if="list.length">
				<block v-for="(item, index) in list[current].goods" :key="index">
					<view
						class="row bgwhite bor_radius_10 m-bot20 p-re"
						:class="{ shadow: pageData.shadow == 1 }"
						@click="toGoods(item.goods_id)"
						v-if="index < pageData.count || show"
					>
						<image :src="$imgUrls(item.img)" mode="aspectFill" class="list_imgs bor_radius_left10"></image>
						<view class="mask1" v-if="!item.stock"></view>
						<image src="https://sra.mogoie.com/Uploads/diy/img/sold.png" class="sold1" v-if="!item.stock"></image>
						<view class="flex-1 m-left20 p-right20 d-flex j-sb f-column">
							<view class="rows m-top20">
								<text class="black size32 ellipsis" :style="{'font-weight': pageData.goodsWeight||300}">{{ item.name }}</text>
								<text class="color_77 size28 m-top20 ellipsis_2 bold300">{{ item.info }}</text>
							</view>
							<view class="row j-sb a-center m-bot20">
								<view>
									<text class="size26" :style="{ color: pageData.priceColor || '#E90B08' }">￥</text>
									<text class="size34 bold500" :style="{ color: pageData.priceColor || '#E90B08' }">{{ parseFloat(item.price) }}</text>
									<text class="h6 color_77 bold300" v-if="item.unit">/{{ item.unit }}</text>
									<!-- <text class="size26 line-through color_C0 m-left10">￥{{parseFloat(item.full_price)}}</text> -->
								</view>
								<view
									class="iconfont size42 bold500"
									:class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
									:style="{ color: pageData.btnColor || '#E90B08' }"
								></view>
							</view>
						</view>
					</view>
				</block>

				<view class="size26 color_66 text-center p-top10" v-if="pageData.count < list[current].goods.length && !show" style="cursor: pointer" @click="getTotal">
					查看全部
				</view>

				<emptys v-if="!list[current].goods.length" :top="10"></emptys>
			</view>
		</view>
	
		<specsPopup :showPopup="showPopup" :pageData="info" @close="showPopup = false" />
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import specsPopup from '../specsPopup.vue'
export default {
	name: 'tabs',
	props: ['pageData'],
	components: {specsPopup},
	data() {
		return {
			list: [],
			current: 0,
			// 控制"查看全部"和超出显示个数商品的显示隐藏
			show: false,
			showPopup: false,
			info: ''
		}
	},
	mounted() {
		this.getBlockInfo()
	},
	methods: {
		...mapMutations(['setHome']),
		async getBlockInfo() {
			const result = await this.$getBlockInfo(this.pageData.list)
			if (!result.list.length) return
			this.list = result.list || []
		},
		click(e) {
			this.current = e.index
		},
		handleClick(index) {
			this.current = index
		},
		getTotal() {
			this.show = true
		},
		handleCollect({ goods_id }) {
			// 收藏
			if (!this.vid) return this.setHome({ showMode: true })
			this.$http
				.post({
					url: '/singleSaleApi/goods_collect',
					data: {
						goods_id
					}
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg)
					this.getBlockInfo()
				})
		},
		toGoods(id) {
			let path = '/pages/goods/goods_detail?isHome=1&goodsid=' + id
			if (this.pageData.mode == 1) path = path + '&mode=1'
			if (this.pageData.mode == 2) path = path + '&mode=1&scan=1'
			this.toUrl(path)
		},
		toCates(item) {
			if(!this.pageData.mode) this.toUrl('/pages/goods/goods_list?classId=' + item.classify_id + '&className=' + item.classify_name)
			if(this.pageData.mode == 1) this.$rectTo('/pages/classify/repast')
			if(this.pageData.mode == 2) this.toUrl('/otherPage/custom/placeOrder')
		},
		openPop(item, type) {
			// type：1试样、2去购买
			if (!this.vid) return this.setHome({ showMode: true })
			this.info = type == 1 ? item.recommendList[0] : item
			this.showPopup = true
		}
	},
	computed: {
		...mapState(['color', 'vid'])
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 30rpx;
	background-color: var(--bgcolor);
}
.list_imgs,
.mask1 {
	width: 242rpx;
	height: 242rpx;
}
.mask1,
.mask2 {
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 0;
	left: 0;
}
.sold1 {
	width: 148rpx;
	height: 148rpx;
	position: absolute;
	top: 50%;
	margin-top: -74rpx;
	left: 47rpx;
}
.side {
	width: 164rpx;
	.tab {
		width: 100%;
		line-height: 120rpx;
		text-align: right;
		position: relative;
		&.on {
			color: var(--color);
			&:after {
				content: '';
				position: absolute;
				width: 6rpx;
				height: 50rpx;
				background: var(--color);
				bottom: 35rpx;
				left: 0;
			}
		}
	}
}
.shadow {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.slide {
	overflow-x: scroll;
	.item {
		width: 280rpx;
		.img,
		.mask2 {
			width: 280rpx;
			height: 436rpx;
		}
		.sold {
			width: 148rpx;
			height: 148rpx;
			position: absolute;
			left: 50%;
			margin-left: -74rpx;
			top: 144rpx;
		}
		.icon-guanzhu1,
		.icon-guanzhu3 {
			top: 20rpx;
			left: 20rpx;
			color: var(--color);
			z-index: 10;
		}
	}
}
.special {
	.item {
		width: 160rpx;
		.img, .mask2 {
			width: 160rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}
	}
	.more {
		width: 84rpx;
		background: #eff0f2;
		.txt {
			writing-mode: vertical-lr;
			letter-spacing: 12rpx;
		}
	}
}
.tab {
	font-size: var(--group-size);
	color: var(--inactive-color);
	font-weight: var(--group-weight);
	}
.list5 {
	background: var(--bgcolor);
	padding-top: 30rpx;
	.item {
		width: 345rpx;
	}
	.img {
		width: 310rpx;
		height: 310rpx;
	}
	.active {
		display: inline-block;
		background: var(--color);
		padding: 4rpx 20rpx;
		border-radius: 30rpx;
		color: white;
	}
	.btn {
		padding: 10rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: white;
	}
}
</style>
